<template>
	<div class="menu-page">
		<div class="top-group">
			<div class="top-select" @click="showArea = true">
				<p>{{ curArea.title }}</p>
				<van-icon name="arrow-down" />
			</div>
			<div class="top-select" @click="showHospital = true">
				<p>{{ curHospital.title }}</p>
				<van-icon name="arrow-down" />
			</div>
			<div class="top-select" @click="show = true">
				<p>{{ year }}年{{ month }}月</p>
				<van-icon name="arrow-down" />
			</div>
		</div>
		<div class="table-top">
			<div>客户名称</div>
			<div>月份</div>
			<div>应收款</div>
			<div @click="setDirection">
				回款率
				<img v-if="order_direction == 'desc'" src="@/assets/images/img_12.png" alt="" class="icon" />
				<img v-else src="@/assets/images/img_12_a.png" alt="" class="icon" />
			</div>
		</div>
		<div class="table-wrapper">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
				<div class="table-row" v-for="item in list" :key="item.id">
					<div>{{ item.hospital.title }}</div>
					<div>{{ year }}年{{ item.month }}月</div>
					<div>￥{{ item.amount }}</div>
					<div>{{ item.refund * 100 }}%</div>
				</div>
			</van-list>
		</div>
		<van-popup v-model="showArea" position="bottom">
			<van-picker title="选择区域" show-toolbar :columns="areaList" @confirm="onConfirmArea" @cancel="showArea = false">
				<template #option="option">
					{{ option.title }}
				</template>
			</van-picker>
		</van-popup>
		<van-popup v-model="showHospital" position="bottom">
			<van-search v-model="hospitalSearch" placeholder="请输入搜索关键词" />
			<van-picker title="选择客户" show-toolbar :columns="getHospitalList" @confirm="onConfirmHospita" @cancel="showHospital = false">
				<template #option="option">
					{{ option.title }}
				</template>
			</van-picker>
		</van-popup>
		<van-popup v-model="show" position="bottom">
			<van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" @cancel="show = false" @confirm="confirmTime" />
		</van-popup>
	</div>
</template>
<script>
	export default {
		name: "MenuPage",
		data() {
			return {
				order_field: "refund",
				order_direction: "desc",
				page: 1,
				year: new Date().getMonth() == 0 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
				month: new Date().getMonth() == 0 ? 12 : new Date().getMonth(),
				currentDate: new Date(),
				maxDate: new Date(),
				minDate: new Date(2020, 0, 1),
				show: false,
				loading: true,
				finished: false,
				list: [],
				showArea: false,
				area_id: "",
				curArea: {
					id: "",
					title: "全部区域",
				},
				areaList: [
					{
						id: "",
						title: "全部区域",
					},
				],
				showHospital: false,
				hospitalSearch: "",
				hospital_id: "",
				curHospital: {
					id: "",
					title: "所有客户",
				},
				hospitalList: [
					{
						id: "",
						title: "所有客户",
					},
				],
			};
		},
		mounted() {
			this.getArea();
			this.getHospitals();
			this.onLoad();
		},
		computed: {
			getHospitalList() {
				if (this.hospitalSearch.length === 0) {
					return this.hospitalList;
				} else {
					return this.hospitalList.filter((item) => item.title.indexOf(this.hospitalSearch) > -1);
				}
			},
		},
		methods: {
			onLoad() {
				this.page = 1;
				this.list = [];
				this.loading = true;
				this.finished = false;
				this.getList();
			},
			confirmTime(val) {
				this.show = false;
				this.year = new Date(val).getFullYear();
				this.month = new Date(val).getMonth() + 1;
				this.onLoad();
			},
			setDirection() {
				if (this.order_direction == "desc") {
					this.order_direction = "asc";
				} else {
					this.order_direction = "desc";
				}
				this.onLoad();
			},
			loadPage() {
				if (this.list.length && this.list.length < this.total) {
					this.page += 1;
					this.getList();
				}
			},
			getList() {
				if (this.finished) return;
				this.loading = true;
				this.$api
					.refund_bill_lists({
						year: this.year,
						month: this.month,
						order_field: this.order_field,
						order_direction: this.order_direction,
						page: this.page,
						area_id: this.area_id,
						hospital_id: this.hospital_id,
					})
					.then((res) => {
						this.loading = false;
						this.list.push(...res.data.data);
						this.total = res?.data.total;
						if (this.list.length >= res.data.total) this.finished = true;
					});
			},
			onConfirmArea(val) {
				this.showArea = false;
				this.curArea = val;
				this.area_id = val.id;
				this.hospital_id = "";
				this.curHospital = {
					id: "",
					title: "所有客户",
				};
				this.hospitalList = [
					{
						id: "",
						title: "所有客户",
					},
				];
				this.getHospitals();
				this.onLoad();
			},
			onConfirmHospita(val) {
				this.showHospital = false;
				this.curHospital = val;
				this.hospital_id = val.id;
				this.onLoad();
			},
			getArea() {
				this.$api.user_area().then((res) => {
					if (res.code == 1) {
						this.areaList.push(...res.data);
					}
				});
			},
			getHospitals() {
				this.$api
					.area_hospitals({
						area_id: this.area_id,
					})
					.then((res) => {
						if (res.code == 1) {
							this.hospitalList.push(...res.data);
						}
					});
			},
		},
	};
</script>

<style scoped lang="scss">
	.menu-page {
		position: relative;
		z-index: 2;
		min-height: 100vh;
		background-color: #fff;

		.top-group {
			padding: 0 0.4rem;
			background-color: #50b1c1;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 16px;
			color: #fff;
			position: sticky;
			top: 0;
			width: 100%;
			z-index: 1;

			.top-select {
				display: flex;
				align-items: center;
				max-width: 32%;

				p {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.van-icon {
					margin-left: 2px;
					font-size: 14px;
				}
			}
		}

		.table-top {
			padding: 0 0.4rem;
			background-color: #f6f6f6;
			height: 50px;
			display: flex;
			// justify-content: space-around;
			align-items: center;
			font-size: 14px;
			color: #000;
			position: sticky;
			top: 50px;
			width: 100%;
			z-index: 1;
			border-bottom: 1px solid #e0e0e0;

			div {
				display: flex;
				align-items: center;

				&:nth-child(1) {
					width: 3.07rem;
				}

				&:nth-child(2) {
					width: 1.32rem;
				}

				&:nth-child(3) {
					width: 2.8rem;
					justify-content: center;
				}

				&:nth-child(4) {
					flex: 1;
				}

				.icon {
					width: 0.35rem;
					margin-left: 6px;
				}
			}
		}

		.table-wrapper {
			.table-row {
				margin: 0 0.4rem;
				min-height: 50px;
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #000;
				position: sticky;
				top: 50px;
				width: calc(100% - 0.8rem);
				border-bottom: 1px solid #e0e0e0;

				div {
					word-break: break-all;

					&:nth-child(1) {
						width: 3.07rem;
						padding-right: 0.13rem;
					}

					&:nth-child(2) {
						width: 1.32rem;
						padding-right: 0.13rem;
					}

					&:nth-child(3) {
						width: 2.8rem;
						padding-right: 0.13rem;
						text-align: center;
					}

					&:nth-child(4) {
						flex: 1;
					}
				}
			}

			.table-row-tool {
				padding: 0 0.4rem;
				min-height: 50px;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				border-top: 1px solid #e0e0e0;
				z-index: 1;
			}
		}
	}
</style>
